<template>
  <div class="container">
    <headMenu />
    <a-card class="general-card" :title="'查询' + $t(menusName)">
      <!--  查询   -->
      <a-row>
        <a-col :flex="1">
          <a-form
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
            label-align="left"
          >
            <a-row :gutter="18">
              <a-col :span="9">
                <a-form-item field="name" label="方法名">
                  <a-input v-model="pageData.name" placeholder="方法名" />
                </a-form-item>
              </a-col>

              <a-col :span="9">
                <a-form-item
                  field="createdTime"
                  :label="$t('searchTable.form.createdTime')"
                >
                  <a-range-picker
                  @clear="clearTime"
                    style="width: 100%"
                    v-model="pageData.createdTime"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>

        <a-col
          :flex="'86px'"
          style="text-align: right; position: relative; right: 200px"
        >
          <a-space direction="vertical" :size="18">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              {{ $t('searchTable.form.search') }}
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              {{ $t('searchTable.form.reset') }}
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <!--  渲染数据  -->
      <a-spin
        :loading="loading"
        tip="This may take a while..."
        style="width: 100%"
      >
        <a-table
          row-key="urId"
          :bordered="false"
          :data="data"
          @selection-change="selectionChange"
          :row-selection="{
            type: 'checkbox',
            showCheckedAll: true,
            checkStrictly: true,
          }"
          style="margin-top: 30px"
          :pagination="false"
          :hoverable="true"
        >
          <template #columns>
            <a-table-column data-index="className" title="类名">
            </a-table-column>
            <a-table-column data-index="methodName" title="方法名">
            </a-table-column>
            <a-table-column data-index="params" title="方法参数">
            </a-table-column>
            <a-table-column data-index="exeuTime" title="执行时长">
            </a-table-column>
            <a-table-column data-index="createTime" title="创建时间">
            </a-table-column>
            <a-table-column data-index="userName" title="用户名">
            </a-table-column>
            <a-table-column data-index="ip" title="IP地址"> </a-table-column>
            <a-table-column data-index="url" title="请求路径"> </a-table-column>
          </template>
        </a-table>

        <!--  分页  -->
        <a-pagination
          :total="pageData.totalCount"
          show-jumper
          show-page-size
          show-total
          show-current
          :current="pageData.page"
          :page-size="pageData.limit"
          :page-size-options="[10, 20, 50, 100]"
          @change="changePage"
          @page-size-change="limitChange"
        />
      </a-spin>

    </a-card>
  </div>
</template>

<script>
import api from '@/api/sys/log';
import headMenu from '@/components/headMenu/headMenu.vue';
export default {
  components: { headMenu },
  data() {
    return {
      form: {},
      loading: true,
      deleteIds: [],
      ediVisible: false,
      menusName: this.$router.currentRoute.value.meta.locale,
      pageData: {
        id: '',
        name: '',
        createTime: '',
        endTiem: '',
        status: '',
        page: '1',
        limit: 10,
        totalCount: 0,
        totalPage: 0,
      },

      data: [],
    };
  },

  methods: {
    clearTime(){
      this.pageData.createTime = ""
        this.pageData.endTiem = ""
    },
    /**
     * 取消弹窗
     */
    handleCancel() {
      this.ediVisible = false;
      this.form = {};
    },

    /**
     * 提交判断是添加还是删除
     */
    handleSubmit() {
      if (this.form.className !== undefined) {
        this.updateSubmit();
      } else {
        this.addSumeit();
      }
    },

    /**
     * 提交修改
     */
    updateSubmit() {
      api.updateAdd(this.form).then((res) => {
        if (res.data.code === 200) {
          //删除成功
          this.$notification.success('修改成功!');
          this.reset();
          this.form = {};
        } else {
          this.$notification.error('修改失败!');
        }
      });
    },

    /**
     *  添加提交
     */
    addSumeit() {
      api.updateAdd(this.form).then((res) => {
        if (res.data.code === 200) {
          //添加成功
          this.$notification.success('添加成功!');
          this.reset();
          this.ediVisible = false;
          this.form = {};
        } else {
          this.$notification.error('添加失败!');
        }
      });
    },
    /**
     * 新添加的方法
     */
    addInfo() {
      this.ediVisible = true;
    },

    /**
     * 判断当前的修改还是添加
     */
    updateAndAdd(id) {
      if (id !== undefined) {
        this.updateInfo(id);
      } else {
        this.addInfo();
      }
    },

    /**
     * 修改前先查询id
     */
    updateInfo(Id) {
      this.loading = true;
      api.info(Id).then((res) => {
        this.form = res.data.data.data;
        this.ediVisible = true;
        this.loading = false;
      });
    },

    /**
     * 删除选中的方法
     */
    subitmDeleteIds() {
      api.delete(this.deleteIds).then((res) => {
        if (res.data.code === 200) {
          //删除成功
          this.$notification.success('删除成功!');
          this.reset();
        } else {
          this.$notification.error('删除失败!');
        }
      });
    },
    /**
     * 查询数据
     */
    search() {
      //获取当前的开始时间和结束时间
      if (this.pageData.createdTime) {
        this.pageData.createTime = this.pageData.createdTime[0];
        this.pageData.endTiem = this.pageData.createdTime[1];
      }
      //发送请求
      this.getList();
    },
    /**
     *  刷新查询的数据
     */
    reset() {
      this.ediVisible = false;
      this.pageData = {
        id: '',
        name: '',
        createTime: '',
        endTime: '',
        status: '',
        page: '1',
        limit: 10,
        totalCount: 0,
        totalPage: 0,
      };
      this.getList();
    },

    /**
     *  选中
     */
    selectionChange(data) {
      this.deleteIds = data;
    },
    /**
     *  选择页码
     */
    changePage(currPage) {
      this.pageData.page = currPage;
      this.getList();
    },
    //选择分页大小
    limitChange(limit) {
      this.pageData.limit = limit;
      this.getList();
    },

    /**
     *  获取当前数据
     */
    getList() {
      this.loading = true;
      var pageData=JSON.parse(JSON.stringify(this.pageData)) 
      pageData.createdTime=[]
      api.list(pageData).then((res) => {
        const page = res.data.data.page;
        this.data = page.list;
        this.pageData.page =
          page.currPage >= page.totalPage ? page.totalPage : page.currPage;
        this.pageData.limit = page.limit;
        this.pageData.totalCount = page.totalCount;
        this.pageData.totalPage = page.totalPage;
        this.loading = false;
      });
    },
    /**
     *  删除账号
     */
    submitDelete(id) {
      let data = [];
      data.push(id);
      api.delete(data).then((res) => {
        if (res.data.code === 200) {
          //删除成功
          this.$notification.success('删除成功!');
          this.reset();
        } else {
          this.$notification.error('删除失败!');
        }
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}

:deep(.arco-table-th) {
  &:last-child {
    .arco-table-th-item-title {
      margin-left: 16px;
    }
  }
}
</style>
